<template>
  <div class="app-container">
    <el-row class="mb20">
      <el-col>
        <el-button
          v-if="cptLabelList.length < 2"
          type="primary"
          :span="12"
          @click="addCinfig"
          >新建</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="cptLabelList">
      <el-table-column label="名称" prop="customTitle" min-width="150" />
      <el-table-column label="排序" prop="labelIndex" min-width="120" />
      <el-table-column label="是否开启" prop="showFlag" min-width="120">
        <template #default="scope">
          <span>{{ scope.row.showFlag == 1 ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="150"
        class-name="small-padding"
      >
        <template #default="scope">
          <el-button type="text" @click="updateRow(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="editDialog" width="900px">
      <el-form ref="formRef" label-width="100px" :model="form" :rules="rules">
        <el-form-item label="名称" prop="customTitle">
          <el-input v-model="form.customTitle" />
          <span>推荐4个中文字符以内</span>
        </el-form-item>
        <el-form-item label="排序" prop="labelIndex">
          <el-input v-model="form.labelIndex" type="number" />
        </el-form-item>

        <el-form-item label="富文本">
          <u-editor v-model="form.customText" :min-height="190"  />
        </el-form-item>
        <el-form-item label="文件上传">
          <FileUpload v-model="form.fileObj" limit="1" :action="uploadUrl" />
        </el-form-item>

        <el-form-item label="是否开启" prop="showFlag">
          <el-switch
            v-model="form.showFlag"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(form)">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { toRefs } from "@vueuse/shared";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import {
  addSetting,
  editSetting,
  getSetting,
  delSetting,
} from "@/api/match/list";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import FileUpload from "@/components/FileUpload";
const uploadUrl = ref("/upload/upLoadToFileServer");
const router = useRoute();
const cptId = ref(router.query.id);
const data = reactive({
  cptLabelList: [],
  form: {
    showFlag: 0,
  },
  editDialog: false,
  rules: {
    customTitle: [{ required: true, message: "必填", trigger: "blur" }],
  },
});
const { form, editDialog, cptLabelList, rules } = toRefs(data);

onMounted(() => {
  // 获取信息
  getthisSetting();
});
const addCinfig = () => {
  editDialog.value = true;
  form.value = {
    showFlag: 0,
  };
};
const updateRow = (row) => {
  editDialog.value = true;
  form.value = row;
  form.value.fileObj = JSON.parse(form.value.fileUrl);
};
const handleDelete = (row) => {
  delSetting({ ids: row.id }).then((res) => {
    ElMessage.success("操作成功");
    getthisSetting();
  });
};
function getthisSetting() {
  getSetting({ cptId: cptId.value }).then((res) => {
    cptLabelList.value = res.data;
    if (cptLabelList.value.length > 0) {
      form.value = cptLabelList.value[0];
    }
  });
}

function submitForm(form) {
  form.fileUrl = JSON.stringify(form.fileObj);

  if (form.id) {
    editSetting(form).then((res) => {
      ElMessage({
        message: res.msg,
        type: "success",
      });
      editDialog.value = false;
      getthisSetting();
    });
  } else {
    form.cptId = cptId.value;
    addSetting(form).then((res) => {
      ElMessage({
        message: res.msg,
        type: "success",
      });
      editDialog.value = false;
      getthisSetting();
    });
  }
}
</script>

<style scoped></style>
